<template>
  <SelectTrigger label="点特效" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 点击事件
 * 注意事项，同一个点击事件只能注册一次，如果多次注册，只生效最后一次的事件
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import EllipsoidFadeMaterialProperty from "./EllipsoidFadeMaterialProperty";
const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer");

  options.value = [
    {
      text: "点特效1- 固定px 大小",
      onselect: function () {
        viewer.entities.removeAll();
        const data = {
          lon: 91.47563680927358,
          lat: 129.758544766388706,
          height: 4263.0,
          minR1: 1,
          maxR1: 50,
          minR2: 2,
          maxR2: 51,
          deviationR: 1,
        };

        let r1 = data.minR1;
        let r2 = data.minR2;
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            data.lon,
            data.lat,
            data.height
          ),
          ellipse: {
            semiMinorAxis: new Cesium.CallbackProperty(() => {
              // 获取相机到地球表面的距离
              const cameraHeight =
                viewer.scene.globe.ellipsoid.cartesianToCartographic(
                  viewer.camera.position
                ).height;
              // 计算调整后的椭圆大小
              const pixelSizeInMeters =
                cameraHeight / viewer.scene.canvas.clientHeight;
              r1 = r1 + data.deviationR; //deviationR为每次圆增加的大小
              if (r1 >= data.maxR1) {
                r1 = data.minR1;
              }
              return r1 * pixelSizeInMeters;
            }, false),
            semiMajorAxis: new Cesium.CallbackProperty(() => {
              // 获取相机到地球表面的距离
              const cameraHeight =
                viewer.scene.globe.ellipsoid.cartesianToCartographic(
                  viewer.camera.position
                ).height;
              // 计算调整后的椭圆大小
              const pixelSizeInMeters =
                cameraHeight / viewer.scene.canvas.clientHeight;
              console.log("pixelSizeInMeters", pixelSizeInMeters);
              r2 = r2 + data.deviationR; //deviationR为每次圆增加的大小
              if (r2 >= data.maxR2) {
                r2 = data.minR2;
              }
              return r2 * pixelSizeInMeters;
            }, false),
            height: 1,
            material: Cesium.Color.RED.withAlpha(0.3),
          },
        });
        viewer.flyTo(entity);
      },
    },
    {
      text: "点特效1",
      onselect: function () {
        viewer.entities.removeAll();
        const data = {
          lon: 91.47563680927358,
          lat: 129.758544766388706,
          height: 4263.0,
          minR1: 1,
          maxR1: 2000,
          minR2: 2,
          maxR2: 2000,
          deviationR: 10,
        };
        let r1 = data.minR1;
        let r2 = data.minR2;
        const entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            data.lon,
            data.lat,
            data.height
          ),
          ellipse: {
            semiMinorAxis: new Cesium.CallbackProperty(() => {
              r1 = r1 + data.deviationR; //deviationR为每次圆增加的大小
              if (r1 >= data.maxR1) {
                r1 = data.minR1;
              }
              return r1;
            }, false),
            semiMajorAxis: new Cesium.CallbackProperty(() => {
              r2 = r2 + data.deviationR; //deviationR为每次圆增加的大小
              if (r2 >= data.maxR2) {
                r2 = data.minR2;
              }
              return r2;
            }, false),
            height: 1,
            material: Cesium.Color.RED.withAlpha(0.3),
          },
        });
        viewer.flyTo(entity);
      },
    },
    {
      text: "点特效2",
      onselect: function () {
        viewer.entities.removeAll();
        let lon = 91.47563680927358;
        let lat = 29.758544766388706;
        let height = 4263.7654574949465;
        let entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
          ellipse: {
            semiMinorAxis: 200,
            semiMajorAxis: 200,
            // ! 重点
            material: new EllipsoidFadeMaterialProperty({
              // color: new Cesium.Color(1, 1, 0, 0.8),
              color: Cesium.Color.RED.withAlpha(0.5),
              duration: 1000,
            }),
          },
        });
        viewer.flyTo(entity);
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
